<template>
  <div>
    <article class="innerPage bookList">
      <header class="breadcrumb">
        <x-breadcrumb :path="$route.path" :title="$route.meta.breadcrumb" :startIndex="$route.meta.startIndex">
        </x-breadcrumb>
      </header>
      <section>
        <div style="margin: 0 10px">
          <ul class="type_select">
            <div>
              <li style="margin: 0 10px">
                <el-date-picker
                  v-model="times"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </li>
              <li style="margin: 0 10px">
                <div class="demonstration">关键词</div>
                <el-input class="input_num2" v-model="searchValue" placeholder="请输入"></el-input>
              </li>
            </div>

            <li class="operation_btn">
              <button @click="search" class="operation_btn2">查询</button>
              <button @click="reset" class="operation_btn1">重置</button>
            </li>
          </ul>
        </div>
        <div class="decorate"></div>
        <div class="btn_addclass btn_post">
          <el-button
            icon="el-icon-circle-plus-outline"
            class="btn-green icon-fontSize"
            @click="dialogFormVisible = true"
            >添加</el-button
          >
        </div>
        <div style="padding: 0 20px">
          <el-table
            :data="tableData"
            class="tableStyle"
            :header-cell-style="$headerCellStyle"
            :border="$isborder"
            stripe
            size="medium"
          >
            <!-- <el-table-column type="selection" width="55" align="left">
            </el-table-column> -->
            <el-table-column prop="key" label="序号" label-class-name="indexColumn" :width="$widtha" align="center" fixed="left"> </el-table-column>
            <el-table-column prop="username" label="名称" align="left"> </el-table-column>
            <el-table-column prop="account" label="账号" align="left"> </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="left"> </el-table-column>
            <el-table-column label="操作" fixed="right" :header-align="$heaerOpt">
              <template slot-scope="scope">
                <div class="btnFrom-box">
                  <div @click="modifyBtn(scope.row.id)" class="details-box">账号修改</div>
                  <div @click="passwordBtn(scope.row)" class="details-box"><span></span>密码修改</div>
                  <div @click="deleBtn(scope.row.id)" class="delete-box"><span></span> 删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <footer class="pagination">
        <div>
          <el-pagination
            background
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            :total="listTotal"
            :page-size="10"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
          >
          </el-pagination>
          <!--  -->
        </div>
        <p>
          共
          <span>{{ listTotal || 0 }}</span>
          数据
        </p>
      </footer>
    </article>

    <el-dialog title="添加账号" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="姓名" label-width="120px" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号" label-width="120px" prop="account">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px" prop="password">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="120px" prop="confirm_password">
          <el-input v-model="form.confirm_password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="账号修改" :visible.sync="dialogTwoVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="账号" label-width="120px" prop="account">
          <el-input v-model="form.account" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="名称" label-width="120px" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForms('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitTwo('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="密码修改" :visible.sync="dialogpassVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="账号" label-width="120px" prop="account">
          <el-input v-model="form.account" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px" prop="password">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="120px" prop="confirm_password">
          <el-input v-model="form.confirm_password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetFormpass('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitPass('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除 -->
    <DeletetkPage ref="isdel" @deletesuccess="getmanDel"></DeletetkPage>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"))
      } else if (!/([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
        callback(new Error("请输入6-20位数字"))
      } else {
        if (this.form.confirm_password !== "") {
          this.$refs.ruleForm.validateField("confirm_password")
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"))
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"))
      } else {
        callback()
      }
    }
    return {
      times: [],
      dialogFormVisible: false,
      dialogTwoVisible: false,
      dialogpassVisible: false,
      searchValue: "",
      tableData: [],
      page: 1,
      listTotal: 0,
      currentPage1: 1,
      form: {
        username: "",
        account: "",
        password: "",
        confirm_password: "",
      },
      rules: {
        //
        username: [
          {
            required: true,
            message: "请填写姓名",
            trigger: "blur",
          },

          { min: 2, message: "长度不能少于在2个字符", trigger: "blur" },
        ],
        account: [
          {
            required: true,
            message: "请填写账号",
            trigger: "blur",
          },
          {
            pattern: /^[^\u4e00-\u9fa5]+$/,
            message: "不允许输入中文",
            trigger: "blur",
          },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
            message: "不允许输入空格等特殊符号",
            trigger: "blur",
          },
          {
            pattern: /[0-9a-zA-Z]{1,6}/,
            message: "只可以输入数字和字母",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            // validator: validatePass,
            validator: this.$elValidator?.password,
            trigger: "blur",
          },
        ],
        confirm_password: [
          {
            required: true,
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
    }
  },

  mounted() {},
  activated() {
    this.searchValue = ""
    this.times = []
    this.page = 1
    this.getList()
    if (this.$route.params.action === "refresh") {
      this.page = 1
      this.listTotal = 0
      this.currentPage1 = 1
      ;(this.tableData = []), //表格数据
        (this.searchValue = "")
    }
    //  console.log( this.$route.params.action," this.$route.params.action")
    this.$refs?.elTable?.doLayout()
    this.$route.params.action === "refresh" && this.getList()
    this.setPageTabs()
  },
  methods: {
    //获取数据
    async getList() {
      try {
        let res = await this.request({
          url: "/admin/branchAccount/list",
          method: "get",
          loading: true,
          data: {
            branch_id: this.$route.query.ids,
            page: this.page,
            limit: 10,
            keywords: this.searchValue,
            start_time: this.times[0],
            end_time: this.times[1],
          },
        })
        if (res) {
          this.tableData = res.content.data
          this.listTotal = res.content.total
          this.currentPage1 = res.content.current_page
        }
      } catch (err) {
        let error = err.message.split("/")
        if (error[0] == 203) {
          this.tableData = []
          this.listTotal = 0
        }
        console.log(err)
        this.errorHandler(err)
      }
    },
    //分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getList()
    },
    // 查询
    search() {
      console.log(this.times)
      this.getList()
    },
    // 重置
    reset() {
      this.searchValue = ""
      this.times = []
      this.page = 1
      this.getList()
    },
    // 点击添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addList()
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    async addList() {
      console.log(this.$route.query.ids)
      try {
        let res = await this.request({
          url: "/admin/branchAccount/add",
          method: "post",
          loading: true,
          data: {
            branch_id: this.$route.query.ids,
            ...this.form,
          },
        })
        if (res) {
          console.log(res)
          if (res.code == 200) {
            this.dialogFormVisible = false
            this.$message({
              message: "添加成功",
              type: "success",
            })
            setTimeout(() => {
              this.getList()
            }, 1000)
          }
        }
      } catch (err) {
        console.log(err)
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
    },
    resetForms(formName) {
      this.$refs[formName].resetFields()
      this.dialogTwoVisible = false
    },
    resetFormpass(formName) {
      this.$refs[formName].resetFields()
      this.dialogpassVisible = false
    },
    // 点击删除
    deleBtn(id) {
      this.$refs.isdel.delshow(id)
    },
    async getmanDel(id) {
      try {
        let res = await this.request({
          url: "/admin/branchAccount/del",
          method: "post",
          loading: true,
          data: {
            id: id,
          },
        })
        if (res) {
          this.$message({
            message: "删除成功",
            type: "success",
          })
          setTimeout(() => {
            this.getList()
          }, 1500)
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 点击修改
    modifyBtn(rowList) {
      this.dialogTwoVisible = true
      let rownum = rowList
      this.form = rownum
    },
    // 编辑
    submitTwo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editList()
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    async editList() {
      try {
        let res = await this.request({
          url: "/admin/branchAccount/change",
          method: "post",
          loading: true,
          data: {
            id: this.form.id,
            username: this.form.username,
          },
        })
        if (res) {
          this.dialogTwoVisible = false
          this.$message({
            message: "编辑成功",
            type: "success",
          })
          setTimeout(() => {
            this.getList()
          }, 1500)
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 修改密码
    passwordBtn(rowList) {
      this.dialogpassVisible = true
      let rowLists = rowList
      this.form = rowLists
    },
    submitPass(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editPass()
        } else {
          return false
        }
      })
    },
    async editPass() {
      try {
        let res = await this.request({
          url: "/admin/branchAccount/changePwd",
          method: "post",
          loading: true,
          data: {
            id: this.form.id,
            password: this.form.password,
            confirm_password: this.form.confirm_password,
          },
        })
        if (res) {
          this.dialogpassVisible = false
          this.$message({
            message: "编辑成功",
            type: "success",
          })
          setTimeout(() => {
            this.getList()
          }, 1500)
        }
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
<style lang="scss">
.selct {
  display: flex;
  flex-direction: row;
  align-items: center;
  .set {
    width: 160px;
  }
  span {
    margin-right: 5px;
  }
}
</style>
